{% extends "bases/base-left.html" %}

{% block title %}
    index
{% endblock %}

{% block head %}

{% endblock %}
{% block rcontent %}
    <!--显示列表-->
    {% csrf_token %}
    <div class="outer">
        <table class="table table-striped" id="table-ser">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>主机IP</th>
                    <th>主机端口</th>
                    <th>所属业务</th>
                    <th>登陆用户名</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for row in host_list %}
                    <tr>
                        <td>{{ row.id }}</td>
                        <td>{{ row.IP }}</td>
                        <td>{{ row.Port }}</td>
                        <td>
                            <a href="{% url 'CallUser' call_id=row.callCircuit_id %}">{{ row.callCircuit.Name }}</a>
                        </td>
                        <td>{{ row.User }}</td>
                        <td>
                            <button id="delser" type="button" class="btn-xs btn-danger" serID={{ row.id }}>
                                删除
                            </button>
                            <button id="editser" type="button" class="btn-xs btn-info" data-toggle="modal" data-target="#editserModal" serID={{ row.id }}>
                                编辑
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!--分页-->
    {% include "bases/paginator.html" %}

    <!--模态对话框,编辑-->
    <div class="modal fade" id="editserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" >
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">服务器信息修改</h4>
          </div>
          <div class="modal-body">
             <form class="form-horizontal" id="edit-form">
                {% csrf_token %}
                 <div class="form-group" style="display: none">
                    <label for="id" class="col-md-3 control-label" style="display: none">ID</label>
                    <div class="col-sm-8" style="display: none">
                        <input type="text" name="id" style="display: none" placeholder="id" />
                    </div>
                 </div>
                <div class="form-group">
                    <label for="Name" class="col-md-3 control-label">服务器</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control"  placeholder="Name" name="SE-name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="IP" class="col-md-3 control-label">IP</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control"  placeholder="IP" name="SE-ip">
                    </div>
                </div>

                 <div class="form-group">
                    <label for="callCircuit__Name" class="col-md-3 control-label">所属业务</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="callCircuit">
                            {% for row in all_line_list %}
                                <option value={{ row.id }}>{{  row.Name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="Port" class="col-md-3 control-label">端口</label>
                    <div class="col-sm-8">
                             <input type="number" class="form-control"  placeholder="Port" name="SE-port">
                    </div>
                </div>
                <div class="form-group">
                    <label for="User" class="col-md-3 control-label">登陆用户</label>
                    <div class="col-sm-8">
                             <input type="text" class="form-control"  placeholder="User" name="SE-user">
                    </div>
                </div>

                <div class="form-group">
                    <label for="PassWd" class="col-md-3 control-label">密码</label>
                    <div class="col-sm-8">
                             <input type="number" class="form-control"  placeholder="PassWd" name="SE-passwd">
                    </div>
                </div>

                <div class="form-group">
                    <label for="SshKey" class="col-md-3 control-label">key</label>
                    <div class="col-sm-8">
                             <input type="number" class="form-control"  placeholder="SshKey" name="SE-sshKey">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="editBtn" type="button" class="btn btn-primary" data-dismiss="modal">修改</button>
                    </div>
                </div>
            </form>
        </div>
      </div>
    </div>

    <script>
        //数据库中查询Host要编辑的数据
        $("#table-ser").on('click', '#editser', function () {
            var row_id = $(this).attr('serID');
            $.ajax({
                url:'/hosts/showhost/',
                type:'Post',
                data:{'sid': row_id, 'csrfmiddlewaretoken':$('input[name="csrfmiddlewaretoken"]').val()},
                success: function (data) {
                    res=JSON.parse(data);
                    if(res.status){
                        $.each(res,function (k, v) {
                            // console.log(k, v , $("#edit-form").find("label[for="+k+"]").siblings().find("input select"))
                            $("#edit-form").find("input[placeholder="+k+"]").val(v)
                        })
                    }
                },
            });
        })


        //Host删除提交
        $("#table-ser").on('click','#delser',function () {
            var rowID = $(this).attr('serID');
            $(this).parent().parent().hide();
            console.log($(this))
            $.ajax({
                url:'/hosts/delhost/',
                type:'POST',
                data:{'sid': rowID, 'csrfmiddlewaretoken':$('input[name="csrfmiddlewaretoken"]').val()},
                success: function (data) {
                    res=JSON.parse(data);
                    if(res.status){
                          $(this).parent().parent().remove();
                    }else{
                        $(this).parent().parent().show();
                    }
                }
            })
        })

        //编辑修改
        $('#editBtn').click(function () {
            $.ajax({
                url:'/hosts/edithost/',
                type:'POST',
                data: $("#edit-form").serialize(),
                dataType: "json",
                success : function(data) {
                    if(data.status){
                        window.location.reload()
                    }else{
                        alert(data.message)
                    }
                }
            });
        })
    </script>

{% endblock %}